<template>
  <div>
    <div class="weui-cells weui-cells_form">
      <div class="weui-cell">
        <div class="weui-cell__hd"><label class="weui-label">专场名称</label></div>
        <div class="weui-cell__bd">
          <input class="weui-input" type="text" placeholder="请填写专场名称" v-model="specialInfo.name"/>
        </div>
      </div>

      <div class="weui-cell">
        <div class="weui-cell__hd miaoshu"><label class="weui-label">描述内容</label></div>
        <div class="weui-cell__bd">
          <textarea class="weui-textarea" placeholder="请填写描述内容" rows="5" v-model="specialInfo.presentation"></textarea>
        </div>
      </div>

      <div class="weui-cell cover">
        <div class="weui-cell__hd"><label class="weui-label">专场封面图片</label></div>
        <div class="weui-cell__bd">
          <!--店铺图片-->
          <div class="weui-uploader">
            <div class="weui-uploader__bd">

              <ul class="weui-uploader__files">
                <!--<li class="weui-uploader__file">-->
                  <!--<img :src="resUrl+imgSpecial.url" alt="">-->
                  <!--<span @click="removeImg(index)"><img src="../../../../static/images/publish/x.png" alt=""></span>-->
                <!--</li>-->
              </ul>

              <div class="uploader__input-box" >
                <img src="../../../../static/images/shopAut/special-cover.png" alt="" v-if="Object.keys(imgSpecial).length==0">
                <div :style="'backgroundImage:url('+resUrl+imgSpecial.smImageUrl+')'" v-if="Object.keys(imgSpecial).length!=0"></div>
                <input id="uploaderInput1" name="files" class="weui-uploader__input" type="file" accept="image/*" @change="upFile($event)"/>
              </div>


            </div>
          </div>

        </div>
      </div>

      <div class="weui-cell">
        <div class="weui-cell__hd"><label for="" class="weui-label">专场开拍时间</label></div>
        <div class="weui-cell__bd">
          <input class="weui-input" type="datetime-local" value="" placeholder="请选择开拍时间" v-model="specialInfo.startTime"/>
        </div>
      </div>

      <div class="weui-cell">
        <div class="weui-cell__hd"><label for="" class="weui-label">专场结拍时间</label></div>
        <div class="weui-cell__bd">
          <input class="weui-input" type="datetime-local" value="" placeholder="请选择结拍时间" v-model="specialInfo.endTime"/>
        </div>
      </div>

      <div class="explain">
        <img src="../../../../static/images/shiming/warn.png" alt="">
        <p>专场开拍与结拍的时间跨度最长为3天</p>
      </div>

      <div class="splitBlock"></div>

      <div class="weui-cell">
        <div class="weui-cell__bd">
          <div class="weui-uploader">
            <div class="weui-uploader__hd">
              <p class="weui-uploader__title">专场拍品 ({{selectProList.length}}件)</p>
            </div>
            <div class="weui-uploader__bd">
              <ul class="weui-uploader__files" id="uploaderFiles">
                <li class="weui-uploader__file check-proImg" v-for="(v,k) in selectProList" :key="k" :style="'backgroundImage: url('+(v.smImageUrl.substr(0,4).toLowerCase() == 'http' ? v.smImageUrl : resUrl+v.smImageUrl)+')'">
                <span @click="removeSelectPro(k)"><img src="../../../../static/images/publish/x.png" alt=""></span>
                </li>
              </ul>

              <div class="uploader__input-box" @click.stop="showProClick">
                <img src="../../../../static/images/publish/publish-pro.png" alt="">
              </div>

            </div>
          </div>
        </div>
      </div>

      <div class="explain">
        <img src="../../../../static/images/shiming/warn.png" alt="">
        <p>至少选择10件店铺中的拍品,才可申请店铺专场</p>
      </div>

    </div>
    <div class="btn-box">
      <a class="weui-btn weui-btn_warn" href="javascript:" @click.prevent="publishSpecialClick">提交审核</a>
    </div>


    <div id="actionSheet_wrap" :class="{actionsheetToggle:isShowProList}">
      <div class="weui-mask_transparent actionsheet__mask" id="mask"></div>
      <div class="weui-actionsheet" id="weui-actionsheet">
        <ul class="special-pro-nav" ref="specialProNav">
          <li v-for="(type,index) in typeList" :key="index">
            <span  :class="{active:typeIndex==type.id}" @click="typeClick(type.id)">{{type.name}}</span>
          </li>
        </ul>
        <ul class="special-pro-type" ref="specialProDynasty">
          <li :class="{active:dynastyIndex== -1}" @click="dynastyClick(-1)">全部类型({{totalDynasty}})</li>
          <li :class="{active:dynastyIndex==index}" v-for="(dynasty,index) in dynastyList" :key="index" @click="dynastyClick(index,dynasty.dynastyId)">{{dynasty.dynastyName}}({{dynasty.dynastyCount}})</li>
        </ul>

        <div class="loadmore-wrapper" ref="loadmoreWrapper" style="overflow: scroll">
          <div class="special-pro-warn" ref="specialProWarn">
            <div>
              <img src="../../../../static/images/shiming/warn.png" alt="">
            </div>
            <p>拍品列表中，仅展示买家未竞价的拍品；点击拍品即可添加，再次点击即取消；</p>
          </div>
        <mt-loadmore :bottom-method="loadBottom"
                     @bottom-status-change="handleBottomChange"
                     :bottom-all-loaded="allLoaded" ref="loadmore" :auto-fill="false" :bottomDropText="topDropText" :bottomPullText="topDropText">
        <div class="weui-actionsheet__menu weui-cells_checkbox">
          <label class="weui-media-box weui-media-box_appmsg weui-check__label" v-for="(pro,index) in proList" :key="index"  :for="pro.id">
            <div class="weui-media-box__hd" :style="'backgroundImage: url('+(pro.smImageUrl.substr(0,4).toLowerCase() == 'http' ? pro.smImageUrl : resUrl+pro.smImageUrl)+')'">
              <!--<img class="weui-media-box__thumb" :src="resUrl + pro.smImageUrl" alt="">-->
            </div>
            <div class="weui-media-box__bd">
              <h4 class="weui-media-box__title">{{pro.name}}</h4>
              <p class="weui-media-box__desc price" v-if="type==1">售价 <span>￥{{pro.fixedPrice}}</span></p>
              <p class="weui-media-box__desc price" v-if="type==2">当前 <span>￥{{pro.currentPrice}}</span></p>
              <p class="weui-media-box__desc viwe">浏览{{pro.viewTimes}}次</p>
            </div>

            <span class="biaoqian" v-if="pro.type==eProductType.collection.val">藏品</span>
            <span class="biaoqian" style="background-color: rgba(0,0,0,0.6);" v-else-if="pro.status==eProductStatus.deal.val">已成交</span>
            <span class="biaoqian" v-else-if="pro.status==eProductStatus.release.val&&pro.startTime<pro.timestamp&&pro.timestamp<pro.endTime">竞拍中</span>
            <span class="biaoqian" style="background-color: #FFA600" v-else-if="pro.status==eProductStatus.release.val&&pro.startTime>pro.timestamp">预展中</span>
            <span class="biaoqian" style="background-color: rgba(0,0,0,0.6);" v-else-if="pro.status==eProductStatus.release.val">已结拍</span>
            <span class="biaoqian" style="background-color: rgba(0,0,0,0.6);" v-else>已成交</span>
            <div class="pro-check">
              <input type="checkbox" name="checkbox" class="weui-check" :id="pro.id" :value="pro.id" v-model="checkProList" @click="selectPro(pro,$event)">
              <i class="weui-icon-checked"></i>
            </div>
          </label>
        </div>
        </mt-loadmore>
        </div>

        <div class="weui-actionsheet__action" ref="specialProBtn">
          <div class="explain">
            <img src="../../../../static/images/shiming/warn.png" alt="">
            <p>至少选择10件店铺中的拍品,才可申请店铺专场</p>
          </div>
          <div class="publish-btn-box">
            <a class="weui-btn btn_disabled weui-btn_warn" href="javascript:" @click.prevent="cancel">取消</a>
            <input class="weui-btn weui-btn_warn" :class="{btn_disabled:isDisabled}" :disabled="isDisabled" :value="checkProList.length==0?'确认添加':'确认添加('+checkProList.length+'件)'" @click.prevent="addPro">
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
  import Moment from 'moment';
  import {getStatusMapByKey,getUser} from '../../../assets/js/tools.js';
  import {ipconfig} from '../../../assets/js/ipconfig';
  import {getDynastyList,saveSpecial,insertSpecialProducts,publishSpecial,getProductList,uploadMedia} from '../../../assets/js/getData';
  export default {
    name: "publishSpecial",
    data(){
      return {
        resUrl:ipconfig.resUrl,//图片、视频、音频等资源访问路径
        user:null,
        userId:null,
        isPriceIndex:0,
        showPrice:true,
        isCheckedIndex:1,
        showTime:true,
        isShowProList:false,//显示拍品列表

        typeList:[{id:2,name:'竞价拍品'},{id:1,name:'一口价拍品'}],//拍品类别 1一口价/2竞拍
        typeIndex:2,
        type:2,//拍品类型

        dynastyList:[],//朝代列表
        dynastyIndex:-1,
        dynastyId:null,//朝代id
        totalDynasty:null,//全部朝代数量

        proList:[],//拍品列表

        checkProList:[],//选中的拍品
        tempCheckProList:[],//添加拍品之前已有的拍品，默认等于checkProList
        selectProList:[],//选中的拍品的图片
        tempSelectProList:[],//添加拍品之前已有的拍品的图片，默认等于selectProList

        specialInfo:{//专场详情参数
          // id:'',
          name:'',
          presentation:'',
          startTime:'',
          endTime:'',
          smImageUrl:'',
          mxImageUrl:''
        },
        specialId:null,

        imgSpecial:{},//专场封面
        urlType:'',

        eProductStatus:null,
        eProductType:null,

        pageNum:1,
        pageSize:6,
        total:null,
        allLoaded: false,
        topDropText:'加载更多',
      }
    },
    created(){
      let eStorageUrl = getStatusMapByKey('eStorageUrl');
      this.urlType = eStorageUrl['specialImages'].val;

      this.eProductStatus = getStatusMapByKey('eProductStatus');
      this.eProductType = getStatusMapByKey('eProductType');

      this.user = getUser();
      this.userId = this.user.id;
    },
    computed:{
      //确认添加按钮是否可以点击
      isDisabled(){
        if(this.checkProList.length<10){
          return true;
        }else {
          return false;
        }
      }
    },
    mounted(){
      // 元素的实际高度
      let h1 = this.$refs.specialProNav.offsetHeight;
      let h2 = this.$refs.specialProDynasty.offsetHeight;
      let h3 = this.$refs.specialProBtn.offsetHeight;
      let h = document.documentElement.clientHeight; //可见区域高度
      this.$refs.loadmoreWrapper.style.height = (h-h1-h2-h3)+'px';
    },
    methods:{
      //上拉加载更多
      loadBottom() {
        if(this.pageNum < this.total) {
          this.pageNum++;
          this.getProList(this.type,this.dynastyId,true);
        }else {
          this.allLoaded = true;
        }
        this.$refs.loadmore.onBottomLoaded();
      },
      handleBottomChange(status){
        console.log(status);
      },

      //删除选中的拍品
      removeSelectPro(k){
        this.selectProList.splice(k, 1); //删除下标为i的元素
        this.checkProList.splice(k, 1); //删除下标为i的元素
      },
      //选中的拍品图片列表
      selectPro(v,e){
        let checked = e.target.checked;
        if(checked){
          this.selectProList.push(v);
        }else {
          for (let i = 0; i < this.selectProList.length; i++) {
            if (this.selectProList[i].id == v.id) {
              this.selectProList.splice(i, 1); //删除下标为i的元素
            }
          }
        }
      },
      //点击确认添加按钮
      addPro(){
        this.pageNum = 1;
        this.allLoaded = false;

        this.isShowProList = !this.isShowProList;
      },
      cancel(){
        this.pageNum = 1;
        this.allLoaded = false;

        this.selectProList = this.tempSelectProList;
        this.checkProList = this.tempCheckProList;
        this.isShowProList = !this.isShowProList;
      },
      //点击显示拍品列表
      showProClick(){
        this.tempSelectProList = [].concat(this.selectProList);
        this.tempCheckProList = [].concat(this.checkProList);
        this.isShowProList = !this.isShowProList;
        //获取拍品朝代列表
        getDynastyList({
          userId:this.userId,
          status:this.eProductStatus.release.val,
        }).then(res => {
          if(res.data.reqResult.code>0){
            this.dynastyList = res.data.data;
            this.totalDynasty = res.data.total;
          }else {
            Toast(res.data.reqResult.msg);
          }
        });
        //获取拍品列表
        this.getProList(this.type,this.dynastyId);
      },
      //上传图片
      upFile(event) {
        let file = event.target.files[0];
        let formdata = new FormData();
        formdata.append('type',this.urlType);
        formdata.append('files',file);
        formdata.append('needSmImg',1);
        uploadMedia(formdata).then(res => {
          if(res.data.reqResult.code > 0){
            let data = res.data.data;
            this.imgSpecial = data[0];
          }else {
            Toast(res.data.reqResult.msg);
          }
        });
      },
      //点击发布专场
      publishSpecialClick(){
        let now = new Date().getTime();
        let start = new Date(this.specialInfo.startTime).getTime();
        let end = new Date(this.specialInfo.endTime).getTime();

        if(!this.specialInfo.name){
          Toast('请填写专场名称');
          return;
        }
        if(!this.specialInfo.presentation){
          Toast('请填写专场描述内容');
          return;
        }
        if(Object.keys(this.imgSpecial).length==0){
          Toast('请上传专场封面图');
          return;
        }
        if(!this.specialInfo.startTime){
          Toast('请选择专场开拍时间');
          return;
        }
        if(start<now){
          Toast('开拍时间需大于当前时间');
          return;
        }
        if(!this.specialInfo.endTime){
          Toast('请选择专场结拍时间');
          return;
        }
        if(end<start){
          Toast('结拍时间需大于开拍时间');
          return;
        }
        if(end-start>3*24*60*60*1000){
          Toast('专场开拍与结拍的时间跨度最长为3天');
          return;
        }
        if(this.checkProList.length==0){
          Toast('请选择专场拍品');
          return;
        }

        this.specialInfo.startTime = Moment(this.specialInfo.startTime).format('YYYY-MM-DD hh:mm:ss');
        this.specialInfo.endTime = Moment(this.specialInfo.endTime).format('YYYY-MM-DD hh:mm:ss');
        this.specialInfo.smImageUrl =this.imgSpecial.smImageUrl;
        this.specialInfo.mxImageUrl =this.imgSpecial.mxImageUrl;
        //先保存专场
        saveSpecial(this.specialInfo).then(res => {
          if(res.data.reqResult.code>0){
            this.specialId = res.data.data.id;
            let pojoList = [];
            for(let i=0;i<this.checkProList.length;i++){
              pojoList[i] = {specialId:this.specialId,productId:this.checkProList[i]};
            }
            //添加拍品到专场
            insertSpecialProducts(pojoList).then(res => {
              if(res.data.reqResult.code>0){
                //发布专场
                publishSpecial(this.specialId).then(res => {
                  if(res.data.reqResult.code>0){
                    Toast("发布专场成功");
                    this.specialInfo.name = '';
                    this.specialInfo.presentation = '';
                    this.specialInfo.startTime = '';
                    this.specialInfo.endTime = '';
                    this.imgSpecial = {};
                    this.selectProList = [];
                    this.checkProList = [];
                  }else {
                    Toast(res.data.reqResult.msg);
                  }
                });
              }else {
                Toast(res.data.reqResult.msg);
              }
            });
          }else {
            Toast(res.data.reqResult.msg);
          }
        });

      },

      //切换朝代分类
      dynastyClick(index,id){
        this.pageNum = 1;
        this.allLoaded = false;

        this.dynastyIndex = index;
        this.dynastyId = id;
        this.getProList(this.type,this.dynastyId);
      },
      //切换拍品类型
      typeClick(id){
        this.pageNum = 1;
        this.allLoaded = false;

        this.typeIndex = id;
        this.type = id;
        this.getProList(this.type,this.dynastyId);
      },
      //获取拍品列表
      async getProList(type,dynastyId,isLoaded){
        let params = {
            userId:this.userId,
            type:type,
            dynastyId:dynastyId,
            status:this.eProductStatus.release.val,
            pageNum:this.pageNum,
            pageSize:this.pageSize
          };

        let res = await getProductList(params);
        if(res.data.reqResult.code>0){
          this.total = Math.ceil(res.data.total / this.pageSize);
          if(isLoaded){
            this.proList = this.proList.concat(res.data.data);
          }else {
            this.proList = res.data.data;
          }
        }else {
          Toast(res.data.reqResult.msg);
        }
      },
      //切换价格方式
      togglePrice(i){
        this.isPriceIndex=i;
        if(this.isPriceIndex==0){
          this.showPrice = true;
        }else {
          this.showPrice = false;
        }
      },
      //切换时间限制
      check(i){
        this.isCheckedIndex = i;
        if(this.isCheckedIndex==1){
          this.showTime=true;
        }else {
          this.showTime=false;
        }
      },

    }
  }
</script>

<style scoped>
  .explain{
    display: flex;
    align-items: center;
    background: rgba(197,0,0,0.03);
    font-size: 0.6rem;
    color: #686463;
    padding: 0.35rem 0 0.35rem 0.35rem;
  }
  .explain img{
    width: 0.65rem;
    margin-right: 4px;
  }
  .miaoshu{
    align-self:flex-start;
  }
  /*上传图片*/
  .cover .weui-cell__hd{
    align-self: flex-start;
  }
  .cover .weui-uploader__file{
    width: 9.4rem;
    /*height: 4.5rem;*/
  }
  .cover .uploader__input-box{
    width: 9.4rem;
    height: 4.5rem;
  }
  .uploader__input-box div{
    height: 4.5rem;
    background: no-repeat 50%;
    background-size: contain;
  }
  .weui-uploader__file{
    width: 3.9rem;
    height: 3.9rem;
    background-origin: content-box;
    background-position:50% 50%;
    background-size:contain;
    background-repeat:no-repeat;
    background-color: rgba(0,0,0,0.2);
  }
  .uploader__input-box{
    position: relative;
    float: left;
    width: 3.9rem;
    margin-right: 9px;
    margin-bottom: 9px;
  }
  .uploader__input-box img{
    width: 100%;
  }
  /*按钮*/
  .btn-box{
    margin-top: 0.85rem;
  }

  /*=============拍品列表框==============*/
  .weui-actionsheet{
    overflow: auto;
    width: 327px;
    height: 100%;
    right: 0;
    left: auto;
    background: #F2F2F2;
    transform: translate(100%, 0);
  }
  .weui-mask_transparent{
    background: rgba(0, 0, 0, 0.6);
    opacity: 0;
    display: none;
  }
  .actionsheetToggle .weui-mask_transparent{
    opacity: 1;
    display: block;
  }
  .actionsheetToggle .weui-actionsheet {
    transform: translate(0, 0);
  }
  .weui-actionsheet__menu {
    background-color: #F2F2F2;
  }
  /*nav*/
  .special-pro-nav{
    display: flex;
    background-color: #ffffff;
  }
  .special-pro-nav li{
    width: 50%;

    text-align: center;
  }
  .special-pro-nav span{
    display: inline-block;
    height: 50px;
    line-height: 50px;
    box-sizing: border-box;
    font-size: 16px;
    color: #999999;
    letter-spacing: -0.39px;
  }
  .special-pro-nav span.active{
    border-bottom: 4px solid #C50000;
    color: #1A1A1A;
  }
  /*类型*/
  .special-pro-type{
    display: flex;
    width: 100%;
    overflow: auto;
    padding-left: 13px;
  }
  .special-pro-type li{
    height: 40px;
    line-height: 40px;
    font-size: 15px;
    color: #999999;
    letter-spacing: -0.41px;
    padding-right: 12px;
    flex-shrink:0;
  }
  .special-pro-type li.active{
    color: #C50000;
  }
  /*提示*/
  .special-pro-warn{
    display: flex;
    background-color: #ffffff;
    padding: 12px 24px;
  }
  .special-pro-warn img{
    width: 13px;
    vertical-align: top;
    margin-top: 2px;
  }
  .special-pro-warn p{
    font-size: 12px;
    color: #676767;
    letter-spacing: -0.33px;
    margin-left: 4px;
    line-height: 17px;
  }
  /*列表*/
  .weui-media-box{
    padding: 5px;
    margin-top: 12px;
    background-color: #ffffff;
  }
  .weui-media-box_appmsg .weui-media-box__hd {
    width: 93px;
    height: 93px;
    margin-right: 15px;
    background-origin: content-box;
    background-position:50% 50%;
    background-size:contain;
    background-repeat:no-repeat;
    background-color: rgba(0,0,0,0.2);
    border-radius: 0;
  }
  .weui-media-box__title{
    font-size: 16px;
    color: #1A1A1A;
    letter-spacing: -0.04px;
    line-height: 22px;
  }
  .weui-media-box__bd .price{
    font-size: 14px;
    color: #999999;
    letter-spacing: 0.16px;
    line-height: 20px;
    margin-top: 3px;
  }
  .weui-media-box__bd .price span{
    color: #C50000;
  }
  .weui-media-box__bd .viwe{
    font-size: 12px;
    color: #999999;
    letter-spacing: 0.34px;
    line-height: 17px;
    margin-top: 3px;
  }
  .biaoqian{
    width: 46px;
    height: 17px;
    line-height: 17px;
    text-align: center;
    background: #C50000;
    font-size: 12px;
    color: #FFFFFF;
    letter-spacing: -0.06px;
    position: absolute;
    right: 0;
    top: 0;
  }
  /*底部按钮*/
  .weui-actionsheet__action{
    margin-top: 0;
    background: #F2F2F2;
    /*display: flex;*/
    /*justify-content: space-between;*/
    /*padding: 0.75rem;*/
  }
  .publish-btn-box{
    margin-top: 0;
    background: #F2F2F2;
    display: flex;
    justify-content: space-between;
    padding: 0.75rem;
  }
  .weui-btn + .weui-btn {
    margin-top: 0px;
  }
  .weui-actionsheet__action .weui-btn{
    width: 141px;
    margin-left: 0;
    margin-right: 0;
  }
  /*选中状态*/
  .pro-check {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
  }
  .weui-cells_checkbox .weui-check:checked + .weui-icon-checked:before {
    content: '\EA06';
    color: #C50000;
    background-color: rgba(0,0,0,0.5);
  }
  .weui-cells_checkbox .weui-icon-checked:before {
    content: '';
    font-size: 20px;
    display: flex;
    align-items: center;
    padding-left: 41.5px;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: 0;
  }
</style>
